<template>
  <div>
    <el-row :gutter="11">
      <el-col :span="12" :push="6">
        <div class="grid-content bg-purple-light">
          <el-tabs v-model="editableTabsValue" @tab-click="handleClick" type="card" style="background: white">
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <div class="tab-div">
                <el-table
                  :show-header="false"
                  :data="tableData"
                  style="width: 800px;margin-left: auto;margin-right: auto;">
                  <el-table-column
                    prop="team1"
                    label="战队"
                    align="right"
                    width="200px">
                  </el-table-column>
                  <el-table-column
                    prop="result1"
                    label="结果"
                    align="right"
                    width="80px">
                  </el-table-column>
                  <el-table-column
                    prop="score1"
                    label="分数"
                    align="right"
                    width="80px">
                  </el-table-column>
                  <el-table-column
                    prop="vs"
                    label="vs"
                    align="center"
                    width="80px">
                    <template slot-scope="scope">
                      <span>VS</span>
                      <p class="wrap-text"> {{ scope.row.time }}</p>
                    </template>

                  </el-table-column>
                  <el-table-column
                    prop="score2"
                    label="分数"
                    align="left"
                    width="80px">
                  </el-table-column>
                  <el-table-column
                    prop="result2"
                    label="结果"
                    align="left"
                    width="80px">
                  </el-table-column>
                  <el-table-column
                    prop="team2"
                    label="战队"
                    align="left"
                    width="200px"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row style="height: 30px" :gutter="11">
      <el-col :span="12" :push="6">队伍排名:</el-col>
    </el-row>
    <el-row :gutter="11">
      <el-col :span="12" :push="6">
          <div class="tab-div">
            <el-table
              :data="squadList"
              style="width: 730px;margin-left: auto;margin-right: auto;">
              <el-table-column
                label="排名"
                type="index"
                align="left"
                width="50">
              </el-table-column>
              <el-table-column
                prop="name"
                label="战队"
                align="left"
                width="200px">
              </el-table-column>
              <el-table-column
                prop="venue"
                label="场次"
                align="left"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="victory"
                label="胜"
                align="left"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="defeated"
                label="负"
                align="left"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="score"
                label="积分"
                align="left"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="result2"
                label="战队队员/战队介绍"
                align="left"
                width="160px">
              </el-table-column>
            </el-table>
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listInfo, getInfo, weekList} from "@/api/match/squadMatchTeamCompareInfoInfo";
import { listTeam, getTeam} from "@/api/match/team";

export default {
  name: 'Match',
  data() {
    return {
      editableTabsValue: '8',
      editableTabs: [],
      tableData: [
      ],
      squadList:[]
    }
  },
  created() {
    this.getWeekInfo();
  },
  methods: {
    getTeam(){
      listTeam({
        pageNum:1,
        pageSize:100
      }).then(response => {
        this.squadList = response.rows;
      });
    },
    getWeekInfo() {
      weekList().then(response => {
        this.editableTabs = response.data;
        this.compareInfo(this.getCurrentDate());
        this.getTeam()
      });
    },
    compareInfo(date) {
      listInfo({
        date:date,
        pageNum:1,
        pageSize:100
      }).then(response => {
        this.tableData = response.rows;

      });
    },
    handleClick(tab, event) {
      listInfo({
        date:tab._props.label
      }).then(response => {
        this.tableData = response.rows;

      });
    },
    getCurrentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped>

.bg-purple-light {

}

.grid-content {
  border-radius: 4px;

}
.wrap-text {
  white-space: pre-line;
  margin: 0px;
}

.tab-div {
  border-radius: 4px;
  //float: left;

}
</style>
